/*
 * @Author: liuying 247220246@qq.com
 * @Date: 2025-01-10 17:46:01
 * @LastEditors: liuying 247220246@qq.com
 * @LastEditTime: 2025-01-20 16:55:29
 * @FilePath: \my-book-react\src\bases\space\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import cx from 'classnames';
import './styles/index.scss';

/**
 * 定义Space组件的属性接口
 */
export interface SpaceProps {
  // 布局方向，可选值为'horizontal'（默认值）或'vertical'
  direction?: 'horizontal' | 'vertical';
  // 对齐方式，可选值为'start'（默认值）、'end'、'center'、'baseline'
  align?: 'start' | 'end' | 'center' | 'baseline';
  // 主轴上的对齐方式，可选值为'start'（默认值）、'end'、'center'、'between'、'around'、'evenly'、'stretch'
  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | 'stretch';
  // 是否换行显示，可选值为true或false（默认值）
  wrap?: boolean;
  // 是否以块级元素显示，可选值为true或false（默认值）
  block?: boolean;
  // 项目之间的间距，可以是数字表示像素值，或字符串表示其他单位的值，或包含两个值的数组表示行间距和列间距
  gap?: number | string | [number | string, number | string];
  // 点击事件处理函数，当组件被点击时触发
  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
  // 组件的子元素
  children?: React.ReactNode;
}
const classPrefix = 'ygm-space';
const formatGap = (gap: number | string) => {
  if (typeof gap === 'number') {
    return `${gap}px`;
  }
  return gap;
};
// const formatGap = (gap: number | string) => typeof gap === 'number' ? `${gap}px` : gap;

const Space: React.FC<SpaceProps> = (props) => {
  const style = React.useMemo(() => {
    if (props.gap) {
      if (Array.isArray(props.gap)) {
        const [gapH, gapV] = props.gap;
        return {
          '--gap-vertical': formatGap(gapV),
          '--gap-horizontal': formatGap(gapH),
        };
      }
      return { '--gap': formatGap(props.gap) };
    }
    return {};
  }, [props.gap]);
  return (
    <div
      className={cx(classPrefix, {
        [`${classPrefix}-wrap`]: props.wrap,
        [`${classPrefix}-block`]: props.block,
        [`${classPrefix}-${props.direction}`]: true,
        [`${classPrefix}-aline-${props.align}`]: !!props.align,
        [`${classPrefix}-${props.justify}`]: !!props.justify,
      })}
      onClick={props.onClick}
      style={style as React.CSSProperties}
    >
      {React.Children.map(props.children, (child) => {
        return child !== null && child !== undefined && <div className={`${classPrefix}-item`}>{child}</div>;
      })}
    </div>
  );
};
Space.defaultProps = {
  direction: 'horizontal',
  block: false,
};
Space.displayName = 'Space';
export default Space;
